<template>
	<list-layout class="system-account-list-wrap margin25">
		<Form slot="table-search" :model="queryCondition" :label-width="75" inline @submit.native.prevent>
			<FormItem label="登录账号" prop="username">
				<Input v-model="queryCondition.username" placeholder="请输入" clearable/>
			</FormItem>
			<FormItem label="用户昵称" prop="nickname">
				<Input v-model="queryCondition.nickname" placeholder="请输入" clearable/>
			</FormItem>
			<FormItem label="联系电话" prop="mobile">
				<Input v-model="queryCondition.mobile" placeholder="请输入" clearable/>
			</FormItem>

			<FormItem :label-width="0" class="search-button-wrap">
				<Button type="primary" @click="queryHandler()">搜索</Button>
				<Button @click="resetQueryCondition(true)">重置</Button>

				<Button type="success" style="margin-left: 20px;" @click="showCreate">新增账号</Button>
			</FormItem>
		</Form>

		<Table slot="table" :columns="columns" :data="page.data" border stripe>
			<template slot="action" slot-scope="{row}">
				<Button type="success" size="small" ghost @click="$bus.emit('layout.password.modify', {id: row.id, showOldPwd: false})">修改密码</Button>

				<template v-if="user.id !== row.id">
					<Button type="primary" size="small" ghost @click="showEdit(row.id)">编辑</Button>
					<Button type="error" size="small" ghost @click="deleteHandler([{id: row.id, state: row.state}])">删除</Button>
				</template>
			</template>
		</Table>

		<Page slot="page"
		      :total="page.total"
		      :current="page.pageNum"
		      :page-size="page.pageSize"
		      @on-change="onPageNumChange"
		      @on-page-size-change="onPageSizeChange"
		/>

		<edit :ref="createDialogRef"/>
	</list-layout>
</template>

<script>
import JBoot from 'jboot-env';

const columns = Object.freeze([
	{title: '登录账号', key: 'username', align: 'center'},
	{title: '用户昵称', key: 'nickname', align: 'center'},
	{title: '联系电话', key: 'mobile', align: 'center'},
	{title: '创建时间', key: 'createTime', align: 'center'},
	{title: '操作', slot: 'action', align: 'center', width: 220}
]);

export default JBoot.page({
	$stores: 'user',

	components: {
		edit: require('./edit').default
	},

	data (){
		return {
			moduleName: 'account',
			columns
		}
	},

	methods: {

	}
});
</script>

<style lang="scss">
.system-account-list-wrap {

}
</style>
